.<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="email"
      name="email"
      label="邮箱"
      placeholder="邮箱"
      :rules="[{ required: true, message: '请填写邮箱' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field name="picture" label="文件上传">
      <template #input>
           <van-uploader  :after-read="afterRead" />
      </template>
    </van-field>
 
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit">登录</van-button>
    </div>
  </van-form>
</template>
<script >
import Vue from "vue";
import { Form } from "vant";
import { Field } from "vant";
import { Uploader } from "vant";
Vue.use(Form);
Vue.use(Field);
Vue.use(Uploader);
import axios from "../until/HttpAxios.js";
export default {
  data() {
    return {
      email: "",
      password: "",
      picture: "",
      file:{}
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      axios
        .post("/api/login", {
          email: this.email,
          password: this.password,
          file:this.file.file
        })
        .then((res) => {
          console.log(res.data.token);
          localStorage.setItem("token", res.data.token);
          this.$router.push("/my");
        });
    },
    afterRead(file){
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.file=file;
    },
   
  },
  mounthed(){

  },
};
</script>
.<style >
</style>